<!DOCTYPE html>
<html lang="en">
    <head>
        <meta charset="UTF-8" />
        <meta http-equiv="X-UA-Compatible" content="IE=edge" />
        <meta name="viewport" content="width=device-width, initial-scale=1.0" />
        <title>Document</title>
        <script src="../js/vue2-dev.js"></script>
    </head>
    <body>
        <!-- 
            key的原理解释：
                1.这个key其实是vue自身需要使用的属性，但是并不交给我们使用，所以dom节点加载完毕后是找不到key这个属性的
                2.key的实际落脚点在vue对于数据变化渲染时的diff算法
                    1.因为vue拿到数据后会先生成虚拟dom节点，存储在内存中，然后再根据虚拟dom节点生成实际dom节点加载到页面
                    2.然后数据发生变化时，vue会根据变化后的数据生成新的虚拟dom节点，但是不立刻根据这个虚拟dom节点生成实际dom节点，
                      而是会和之前和这些数据有关的虚拟dom节点进行对比
                    3.对比的结果就是，不相同的部分使用新生成的虚拟dom节点生成实际dom节点，相同的部分使用之前根据虚拟dom生成的实际dom节点，
                      然后进行拼接，如果数据改变前后的虚拟dom节点完全没有改变，就复用数据改变之前通过虚拟dom生成的实际dom节点
                    4.注意！！这里对比的是虚拟dom节点，对比的依据就是我们给出的key，key相同的虚拟dom节点之间进行对比
            index和id的选用：
                1.如果是只读页面，不涉及到输入的dom元素或者输入dom元素并未使用的时候，其实index和id在使用上没有任何区别
                  但是使用index的时候，如果出现数据的改变，数据改变之前的虚拟dom节点肯定是相同的key之间的虚拟dom节点不同，无法复用，需要重新生成，效率较低
                2.如果存在一些输入dom元素并且输入了数据的时候：
                    1.如果不改变数组之前数据的结构顺序（顺序追加，删除），那么index和id也没有区别
                    2.但是如果改变了之前数据的结构顺序（头部插入，删除），就会引发逻辑错误
                3.解释：因为vue得到改变后的数据后生成新的虚拟dom，然后会和数据改变之前的虚拟dom进行对比，
                        由于我们涉及输入的dom在虚拟dom时并未使用，新生成的虚拟dom中涉及输入的虚拟dom也是未使用的，所以会引发这个虚拟dom对应的实际dom的复用，
                        但是实际dom已经输入了一些数据了，所以会引发错乱！
         -->

        <div id="root">
            <template>
                <h2>使用index作为key，顺序添加（不破坏数组本身的顺序）</h2>
                <button @click.once="pushPerson1">点我添加用户</button>
                <ul>
                    <li v-for="(person,index) in persons1" :key="index">
                        {{person.name}}--{{person.age}}--<input
                            class="inputelement"
                        />
                    </li>
                </ul>
            </template>
            <hr />
            <template>
                <h2>使用index作为key，逆序添加（破坏了数组本身的顺序）</h2>
                <button @click.once="unshiftPerson2">点我添加用户</button>
                <ul>
                    <li v-for="(person,index) in persons2" :key="index">
                        {{person.name}}--{{person.age}}--<input
                            class="inputelement"
                        />
                    </li>
                </ul>
            </template>
            <hr />
            <template>
                <h2>使用id作为key，顺序添加（不破坏数组本身的顺序）</h2>
                <button @click.once="pushPerson3">点我添加用户</button>
                <ul>
                    <li v-for="(person,index) in persons3" :key="person.id">
                        {{person.name}}--{{person.age}}--<input
                            class="inputelement"
                        />
                    </li>
                </ul>
            </template>
            <hr />
            <template>
                <h2>使用id作为key，逆序添加（破坏数组本身的顺序）</h2>
                <button @click.once="unshiftPerson4">点我添加用户</button>
                <ul>
                    <li v-for="(person,index) in persons4" :key="person.id">
                        {{person.name}}--{{person.age}}--<input
                            class="inputelement"
                        />
                    </li>
                </ul>
            </template>
        </div>

        <script>
            const vm = new Vue({
                data() {
                    return {
                        persons1: [
                            { id: 1, name: "张三", age: 18 },
                            { id: 2, name: "李四", age: 19 },
                            { id: 3, name: "王五", age: 20 },
                        ],
                        persons2: [
                            { id: 1, name: "张三", age: 18 },
                            { id: 2, name: "李四", age: 19 },
                            { id: 3, name: "王五", age: 20 },
                        ],
                        persons3: [
                            { id: 1, name: "张三", age: 18 },
                            { id: 2, name: "李四", age: 19 },
                            { id: 3, name: "王五", age: 20 },
                        ],
                        persons4: [
                            { id: 1, name: "张三", age: 18 },
                            { id: 2, name: "李四", age: 19 },
                            { id: 3, name: "王五", age: 20 },
                        ],
                    };
                },
                methods: {
                    pushPerson1() {
                        this.persons1.push({ id: 4, name: "刘六", age: 21 });
                    },
                    unshiftPerson2() {
                        this.persons2.unshift({ id: 4, name: "刘六", age: 21 });
                    },
                    pushPerson3() {
                        this.persons3.push({ id: 4, name: "刘六", age: 21 });
                    },
                    unshiftPerson4() {
                        this.persons4.unshift({ id: 4, name: "刘六", age: 21 });
                    },
                },
            });

            vm.$mount("#root");
        </script>
        <script>
            const inputArr = document.getElementsByClassName("inputelement");
            for (let i = 0; i < inputArr.length; i++) {
                inputArr[i].setAttribute(
                    "value",
                    inputArr[i].parentNode.innerHTML.substring(0, 6)
                );
            }
        </script>
    </body>
</html>
